<template>
  <view class="clock-detail">
    <CustomHeader :scroll-top="scrollTop" :title="pageTitle" />
    <!-- 打卡内容 -->
    <view v-if="clockLog && clockLog.length" class="clock-detail__clock-content">
      <BorderBox v-for="(item, index) in clockLog" :key="index" :inside-padding="18" :bg-color="'#FFFBEA'" :bd-color="'#CB9064'">
        <view class="clock-detail__clock-content--item">
          <ClockItem :audio-index="index" :page-on-hide="pageOnHide" :show-more-handle-btn="canEdit" :show-clock-days="false" :item="item" @giveLikeHandle="refreshData" @openActionSheet="openActionSheet" />
        </view>
      </BorderBox>
      <!-- <view v-for="(item,index) in vi" :key="index">
      <Audio @handleAudio="handleAudio" :playFlag="playFlag" :index="index" :src="item" />
      </view>-->
    </view>
    <!-- 老师点评 -->
    <view v-if="teacherComment" class="clock-detail__teacher-remark">
      <BorderBox :inside-padding="18" :bg-color="'#FFFBEA'" :bd-color="'#CB9064'">
        <view class="clock-detail__teacher-remark--title">老师点评</view>
        <view class="clock-detail__teacher-remark--content">{{ teacherComment }}</view>
      </BorderBox>
    </view>

    <!-- 其他活动 -->
    <view v-if="hasActivityInfo" class="clock-detail__other-active">
      <BorderBox :inside-padding="18" :bg-color="'#FFFBEA'" :bd-color="'#CB9064'">
        <view class="clock-detail__other-active-wrap">
          <view class="clock-detail__other-active--info">
            <view class="name">{{ activityInfo.activity_title }}</view>
            <view class="participation">
              <text>{{ activityInfo.show_join_num }}</text>人已参与
            </view>
          </view>

          <view class="clock-detail__other-active--handle" @tap="inJoinActivity">加入</view>
        </view>
      </BorderBox>
    </view>

    <!-- 分享按钮 -->
    <view v-if="clockLog && clockLog.length" class="clock-detail__share">
      <view class="clock-detail__share--btn" @tap="openDaySign">分享打卡</view>
      <view class="clock-detail__share--btn invite-friends" @tap="clockInvite">邀请好友</view>
    </view>
    <view class="clock-detail__share-block" />

    <!-- 操作 -- 重新打卡 -->
    <AtActionSheet class="afresh-clock-in" :on-close="handleClose" :is-opened="showMoreHandles" :cancel-text="'取消'">
      <AtActionSheetItem :on-click="afreshClock">
        <view>重新打卡</view>
        <view class="item-tip">（只能重打一次卡哦）</view>
      </AtActionSheetItem>
    </AtActionSheet>

    <!-- 打卡日签 -->
    <GenerateImage :theme-id="getParams.theme_id" :uuid="getParams.clock_id" :student-id="getParams.student_id" :show.sync="showShare" @activeBreakRule="activeBreakRule" />
    <!-- 邀请好友 -->
    <Invite :invite-data="inviteData" :show.sync="showInvite" />
  </view>
</template>



<script lang="ts">
import "./index.scss";
import Taro from "@tarojs/taro";
import { Component, Vue } from "vue-property-decorator";
import { clockDetail } from "@/libs/api/clock-detail";
import { INVITE_FRIENDS, CLOCK_INFO_BE_DELETE } from "@/config/clock-detail";
import { AtActionSheet, AtActionSheetItem } from "taro-ui-vue";
import ClockItem from "@/components/clock-item/index.vue";
import BorderBox from "_c/border-box/index";
import Audio from "@/components/record/audio";
import CustomHeader from "_c/custom-header/index.vue";
import GenerateImage from "@/components/generate-image/index";
import Invite from "@/components/generate-image/invite";
import { CLOCK_INVITING } from "@/config/clock-in";
import { joinActivity } from "_api/activity";

export default {
  components: {
    ClockItem,
    BorderBox,
    Audio,
    CustomHeader,
    AtActionSheet,
    AtActionSheetItem,
    GenerateImage,
    Invite,
  },
  data() {
    return {
      /* 打卡数据 */
      clockLog: [],
      vi: [
        "http://xthk.oss-cn-shenzhen.aliyuncs.com/teach/2020-11-30/1606705701896_0.8366339649927976_%E6%98%A5%E9%A3%8E%E4%B8%80%E9%A1%BE.wav",
        "http://xthk.oss-cn-shenzhen.aliyuncs.com/teach/2020-11-30/1606705701896_0.8366339649927976_%E6%98%A5%E9%A3%8E%E4%B8%80%E9%A1%BE.wav",
      ],
      playFlag: -1,
      imgGather: {
        INVITE_FRIENDS,
      },
      /* 操作面板 */
      showMoreHandles: false,
      /* 活动参与信息 */
      activityInfo: {},
      /* 可以重新打卡 */
      canEdit: false,
      /* 分享图展示 */
      showInvite: false,
      /* 分享类型 */
      shareType: "",
      /* 邀请好友数据 */
      inviteData: {},
      /* 打卡日签 */
      showShare: false,
      /* 页面title */
      pageTitle: "",
      pageOnHide: false,
      scrollTop: false,
    };
  },

  computed: {
    hasActivityInfo() {
      return Object.keys(this.activityInfo).length;
    },
    /* 老师点评 */
    teacherComment() {
      return (
        this.clockLog.length &&
        this.clockLog[0].student_clock_info.comment_content
      );
    },

    hidePage() {
      return {
        overflow: this.showShare ? "hidden" : "unset",
      };
    },
  },
  onPageScroll({ scrollTop }) {
    this.scrollTop = scrollTop;
  },
  onHide() {
    this.pageOnHide = !this.pageOnHide;
  },
  onShow() {
    this.clockDetail();
    console.log(this.getParams.student_id, "getParamsgetParams");
  },
  methods: {
    openDaySign() {
      this.showShare = true;
    },

    clockInvite() {
      this.shareType = CLOCK_INVITING;
      this.showInvite = true;
    },
    /* 生成打卡日签错误 */
    activeBreakRule({ message }) {
      Taro.showToast({
        title: message,
        icon: "none",
        duration: 2000,
      });
      setTimeout(() => {
        Taro.redirectTo({
          url: `/pages/theme-detail/index?id=${this.clockLog[0].student_clock_info.theme_id}`,
        });
      }, 2000);
    },
    /* 点赞成功后 */
    refreshData(data, message, code) {
      /* this.clockDetail(); */
      if (code === 400) {
        Taro.showToast({
          title: message,
          icon: "none",
          duration: 2000,
        });
        setTimeout(() => {
          Taro.redirectTo({
            url: `/pages/theme-detail/index?id=${this.clockLog[0].student_clock_info.theme_id}`,
          });
        }, 2000);
      }
      console.log(data, "giveLikeHandlegiveLikeHandle");
    },
    /* 重新打卡 */
    afreshClock() {
      const { theme_id, id } = this.clockLog[0].student_clock_info;
      this.showMoreHandles = false;
      Taro.navigateTo({
        url: `/pages/clock-in/index?id=${theme_id}&uuid=${id}`,
      });
    },
    /* 加入活动 */
    async inJoinActivity() {
      const { data } = await joinActivity({ id: this.activityInfo.id }).catch(
        (e) => {
          Taro.showToast({ title: e.message, icon: "none" });
          return { data: null };
        }
      );
      
      if(data){
        Taro.showToast({
          title: '加入成功',
          icon: 'none',
          duration: 1500
        })
        setTimeout(() => {
          Taro.navigateTo({
            url: `/pages/activity-detail/index?id=${this.activityInfo.id}`,
          });
        },1500)
      }
    },
    /* 打卡动作面板 */
    openActionSheet() {
      console.log("dsjh");
      this.showMoreHandles = true;
    },
    handleClose() {
      console.log("123");
      this.showMoreHandles = false;
    },
    handleAudio(index) {
      console.log(index);
      this.playFlag = index;
    },
    /* 获取打卡详情 */
    async clockDetail() {
      const { clock_id, student_id } = this.getParams;
      const {
        data: {
          student_info,
          clock_data,
          activity_info,
          can_edit,
          invite_card,
        },
      } = await clockDetail({ clock_id, student_id }).catch((e) => {
        /* 接口报错返回上一级 */
        if (e.status_code === CLOCK_INFO_BE_DELETE) {
          Taro.showToast({
            title: "该动态内容由于违规已被删除！",
            icon: "none",
            duration: 2000,
          });
          setTimeout(() => {
            Taro.navigateBack({
              delta: 1,
              fail: () => {
                Taro.switchTab({
                  url: "/pages/index/index",
                });
              },
            });
          }, 2000);
        }
        return { data: {} };
      });
      (this.pageTitle = clock_data ? clock_data.theme_title : "打卡详情"),
        student_info &&
          (this.clockLog = [
            {
              student_base_info: student_info,
              student_clock_info: clock_data,
            },
          ]);
      this.activityInfo = activity_info || {};
      this.canEdit = can_edit;
      this.inviteData = invite_card;
    },
  },
};
</script>